// 使用立即执行函数解决函数冲突的问题，解决命名冲突问题
(function () {
    console.log("第一个");
    console.log(document.querySelector('.bar .chart'));

    // 获取dom容器，实例化对象
    var t = document.querySelector('.bar .chart');
    var myChart = echarts.init(t);

    // 指定配置项和数据
    fetch('http://192.168.224.26:8082/chargeStation/getYesTotalEle')
        .then(response => response.json())
        .then(data => {
            const pieData = data.data.map(item => ({
                value: item.dailyEle,
                name: item.name
            }));

            const option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center',
                    color: ['#547cc6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                    textStyle: {
                        color: '#ffffff' // 设置图例文字颜色
                    }
                },
                series: [
                    {
                        color: ['#54c6ab', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                        name: '昨日发电量',
                        type: 'pie',
                        center: ['50%', '70%'],
                        // radius: ['40%', '70%'],
                        radius: '55%',
                        avoidLabelOverlap: false,
                        // itemStyle: {
                        //     borderRadius: 10,
                        //     borderColor: '#fff',
                        //     borderWidth: 2
                        // },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: pieData
                    }
                ]
            };

            // 将这个 `option` 用于你的图表实例
            myChart.setOption(option);  // 移动到这里
        })
        .catch(error => console.error('请求数据失败:', error));

    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();


(function () {
    console.log("第二个")
    console.log(document.querySelector('.line .chart'))
    const myChart = echarts.init(document.querySelector('.line .chart'));
    // 从后端获取数据
    fetch('http://localhost:8082/chargeStation/getYesEveryEle')
    // fetch('https://32faea8a.r5.cpolar.top/chargeStation/getYesEveryEle')
        .then(response => response.json())
        .then(data => {
            // 假设后端返回的数据格式如下
            const responseData = data.data;
            console.log(responseData)
            // 将数据转换为 ECharts 所需的格式
            const chartData = responseData.map(item => ({
                value: Math.floor(item.orderNum), // 去掉小数部分
                name: item.name
            }));
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                        name: '充电次数',
                        type: 'pie',
                        radius: '50%',
                        data: chartData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
})();

